
<h3>抽奖活动</h3>

<div class="ui-g">
	<div class="ui-g-6">
        <div class="rotator-outer">
            <div class="rotator-inner">
                <ul [ngStyle]="{'margin-top.px': rotation}" class="rotator-content">
                    <li *ngFor="let item of memberItems">
                        <label>{{item.code}}</label>
                        <span>{{item.name}}</span>
                    </li>
                </ul>
            </div>
            <div class="rotator-center">
                <!-- 中奖框 -->
            </div>

            <div>
                <!-- empty -->
            </div>
        </div>


	</div>
	<div class="ui-g-6">

        <p-panel>
            <p-header>
                <div style="text-align: center;">
                    <p-selectButton [options]="prizeItems" [(ngModel)]="prize" (onChange)="onPrizeChange()"></p-selectButton>
                </div>
            </p-header>

            <div class="prize-info">
                <div class="prize-detail">
                    {{ prize.detail }}
                </div>
                <div class="prize-amount">
                    {{ winners.length }} / {{ prize.amount }} 名
                </div>
            </div>

            <p-footer>
                <div style="text-align: center;" *ngIf="winners.length < prize.amount">
                    <button pButton type="button" (click)="onRollClick()" label="开始"
                            style="font-size: larger;" class="ui-button-info" icon="fa fa-fw fa-play"
                            *ngIf="ready"></button>
                    <button pButton type="button" (click)="onStopClick()" label="停止"
                            style="font-size: larger;" class="ui-button-info" icon="fa fa-fw fa-stop"
                            *ngIf="rolling"></button>
                </div>
                <div style="text-align: center; font-size: 16pt;" *ngIf="winners.length >= prize.amount">
                    恭喜下列人员抽中<span style="color: darkblue; font-weight: bold;">{{ prize.name }}</span>！
                </div>
            </p-footer>

		</p-panel>

        <div style="margin-top: 5px;">
            <p-dataGrid [value]="winners" [paginator]="false" emptyMessage="还没有中奖嘉宾...">
                <ng-template let-row let-i="index" pTemplate="item">
                    <div class="ui-g-12 ui-md-3" style="font-size: 14pt; color: #8A6714; font-weight: bold;">

                        {{row.member.code}}
                        {{row.member.name}}

                    </div>
                </ng-template>
            </p-dataGrid>
        </div>

	</div>
</div>




